<template>
  <div class="table-box">
    <ProTable ref="proTableRef" row-key="id" title="列表" :columns="columns" :request-api="loadTable" highlight-current-row>
      <template #tableHeader>
        <ElButton type="primary" :icon="Download" @click="excelFunction">导出</ElButton>
      </template>
      <!-- 账户操作 -->
      <template #operation="scope">
        <ElButton type="primary" link :icon="View" @click="onViewClicked(scope.row)">查看</ElButton>
        <ElButton type="warning" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
      </template>
    </ProTable>
    <PersonForm ref="formRef" @success="refresh" />
  </div>
</template>

<script setup lang="ts" name="ZLPerson">
import { EditPen, View, Download } from '@element-plus/icons-vue'
import PersonForm from './person-form.vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ref, reactive } from 'vue'
import { Person, pagePerson } from '@api/tby/mountains/person'
import { FormType } from '@/enums'
import { exportExcel } from '@api/tby/common/common'

const proTableRef = ref<ProTableInstance>()

function refresh() {
  proTableRef.value?.getTableList()
}

function getIndex(index: number) {
  const { current, size } = proTableRef.value!.pageable
  return (current - 1) * size + index + 1
}

// 表格列
const columns = reactive<ColumnProps<Person.Record>[]>([
  { type: 'index', label: '序号', width: 60, index: getIndex },
  { prop: 'name', label: '名称', align: 'center', search: { el: 'input', key: 'name', order: 1 } },
  { prop: 'phone', label: '电话', align: 'center' },
  {
    prop: 'isAudit',
    label: '是否审核',
    enum: Person.AuditEnum,
    tag: true,
    search: { el: 'select', key: 'isAudit', order: 2 }
  },
  {
    prop: 'userType',
    label: '护林员类型',
    enum: Person.UserTypeEnum,
    tag: true,
    search: { el: 'select', key: 'userType', order: 3 }
  },
  {
    prop: 'status',
    label: '聘用状态',
    enum: Person.StatusEnum,
    tag: true,
    search: { el: 'select', key: 'status', order: 4 }
  },
  { prop: 'orgName', label: '所属部门', align: 'center' },
  { prop: 'position', label: '职务', align: 'center' },
  { prop: 'operation', label: '操作', fixed: 'right', width: 160 }
])

const loadTable = (query: Person.Query) => {
  query.size = 500
  return pagePerson(query)
}

const formRef = ref<InstanceType<typeof PersonForm> | null>(null)

// 修改
const onEditClicked = (row: any) => {
  formRef.value?.open(FormType.EDIT, row.id)
}

// 查看用户
const onViewClicked = (row: any) => {
  formRef.value?.open(FormType.VIEW, row.id)
}

const excelFunction = () => {
  exportExcel('/mountains_person/excel', proTableRef.value?.searchParam)
}
</script>
